<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航栏下拉菜单</title>
<style>
*{margin:0;padding:0;}
ul{
    list-style-type:none;
    background-color:#333;
    overflow:hidden;
}
li{
    float:left;
}
li a, .dropbtn{
    display:inline-block;
    color:white;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}

/* 下拉菜单显示后修改下拉按钮的背景色 */
li a:hover, .dropdown:hover .dropbtn{
    background-color:#111;
}

.dropdown{
    display:inline-block;
}

.dropdown-content{
    min-width:200px;
    background-color:#F9F9F9;
    position:absolute;
    display:none;
    box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);
}

.dropdown-content a{
    color:black;
    text-decoration:none;
    padding:12px 16px;
    display:block;
}

/* 鼠标移入后修改链接的背景色 */
.dropdown-content a:hover{
    background-color:#F1F1F1;
}

/* 鼠标移入后显示下拉菜单 */
.dropdown:hover .dropdown-content{
    display: block;
}
</style>
</head>
<body>
<ul>
    <li><a href="#shop" class="active">在线商城</a></li>
    <li><a href="#news">产品展示</a></li>
    <div class="dropdown">
        <a href="#" class="dropbtn">下拉菜单</a>
        <div class="dropdown-content">
            <a href="#">子菜单 1</a>
            <a href="#">子菜单 2</a>
            <a href="#">子菜单 3</a>
        </div>
    </div>
</ul>
</body>
</html>